<template>
  <section>
    <div class="header-query">
      <el-form inline>
        <el-form-item label="通道名称">
          <el-select v-model="chanelNo" @change="chanelChanged">
            <el-option 
              v-for="item in SYS_PARAMS.nb"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" @click="getRTD">刷新</el-button>
      </div>

    </div>
    <ft-table
      ref="table"
      :data="data"
      :columns="columns"
      :cell-style="{background: 'rgba(84, 92, 100, 0.25)'}"
      pagination
      :page-size="page.size"
      :page-num="page.page"
      :total="page.total"
      layout="total, prev, pager, next, jumper"
      @current-change="pageCurrentChange"

    >
    </ft-table>

  </section>
</template>
<script>
import {getRTDApi} from '@/api/rtd.js';
import {mapGetters} from 'vuex';

export default {
  name: 'rtd',
  data(){
    return {
     
      columns:[
        {prop: 'name', label: 'tag名称', align: 'center'},
        {prop: 'data', label: '监测值', align: 'center'},
      ],
      rawData: [],
      data: [],
      page:{
        page: 1,
        size: 20,
        total: 0
      },
      chanels: [],
      chanelNo: 'com1',
    }
  },
  computed:{
    ...mapGetters(['SYS_PARAMS', 'userInfo'])
  },
  mounted(){
    this.getRTD();
  },
  methods: {
    getRTD(){
      const params = {
        uid: this.userInfo.uid,
        ch: this.chanelNo, //通道编号
        is_admin: this.userInfo.is_admin
      }
      //缺少网关ID
      getRTDApi(params).then(res =>{
        if(res.code == 0 ){
          this.rawData = res.data;
          this.page.total = res.data.length;
          this.getData();
        }
      })
    },


    chanelChanged(){
      if(this.chanelNo){
        this.getRTD();
      }
    },
    getData(){
      this.data = this.rawData.slice((this.page.page - 1)*this.page.size, this.page.page*this.page.size)
    },
    pageCurrentChange(page){
      this.page.page = page;
      this.getData();
    },
  }

}
</script>
<style  scoped>
.header-query{
 display: flex;
 justify-content: space-between;
 padding: 10px;
}
</style>
